<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- <script crossorigin src="https://unpkg.com/browse/@babel/standalone@7.10.5/babel.min.js"></script> -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <!-- <script src='../packages/semi-ui-react/dist/umd/semi-ui-react.js'></script>
    <link rel="stylesheet" href="../packages/semi-theme-default/css/semi.css"> -->
    <script src="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/umd/semi-ui.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@douyinfe/semi-ui@2.1.4/dist/css/semi.css">
</head>

<body>

  <div id="root">1</div>

  <script type="text/babel">
    console.log(SemiUI)
    const { Input, Button, Toast, Icon, Form } = SemiUI;
    ReactDOM.render(
     <div>
      <Button onClick={() => Toast.warning({ duration: 0, content: 'wah' })}>test</Button>
      <Input defaultValue='semi' onChange={(value) => Toast.info('abc')}></Input>
      <Icon type='youtube' />
      <Form render={({ formState, formApi, values }) => (
          <div>
              <Form.Select field="Role" label='角色' style={{width:176}}>
                  <Form.Select.Option value="admin">管理员</Form.Select.Option>
                  <Form.Select.Option value="user">普通用户</Form.Select.Option>
                  <Form.Select.Option value="guest">访客</Form.Select.Option>
              </Form.Select>
              <Form.Input field='UserName' label='用户名' style={{width:80}}/>
              <Form.Input field='Password' label='密码' style={{width:176}}/>
              <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
          </div>
      )} layout='horizontal' onValueChange={values=>console.log(values)}>
      </Form>
      </div>,
      document.getElementById("root")
    );
  </script>

</body>
</html>